<script setup lang="ts">
import { ref } from 'vue'
import router from '@/router'



const activeIndex = ref('-1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  switch (key) {
    case '-1':
      router.push({
        name: 'Home',
      })
      break
    case '1-1':
      router.push({
        name: 'User',
      })
      break
    case '1-2':
      router.push({
        name: 'Courseware',
      })
      break
    case '1-3-1':
      router.push({
        name: 'TeacherNum',
      })
      break
    case '1-3-2':
      router.push({
        name: 'StudentNum',
      })
      break
    case '1-3-3':
      router.push({
        name: 'Efficiency',
      })
      break
    case '1-3-4':
      router.push({
        name: 'StudyResult',
      })
      break
    case '2-1':
      router.push({
        name: 'Preparation',
      })
      break
    case '2-2':
      router.push({
        name: 'Topic',
      })
      break
    case '2-3':
      router.push({
        name: 'Analysis',
      })
      break
    case '3-1':
      router.push({
        name: 'Study',
      })
      break
    case '3-2':
      router.push({
        name: 'Evaluation',
      })
      break
    case '4-1':
      router.push({
        name: 'KnowledgeImp',
      })
      break
  }
}

</script>

<template>
  <div class="index_container">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="0">
        <img
          style="height: 44px;border-radius: 10px"
          src="/src/assets/img/66.png"
          alt="图片标识"
        />
        <span style="font-size: 30px;margin-left: 15px;color: aqua">教学实训智能系统</span>
      </el-menu-item>

      <el-menu-item index="-1">首页</el-menu-item>

      <el-sub-menu index="1">
        <template #title>系统功能</template>

        <el-menu-item index="1-1">用户管理</el-menu-item>
        <el-menu-item index="1-2">课件资源</el-menu-item>
        <el-sub-menu index="1-3">
          <template #title>大屏概览</template>
          <el-menu-item index="1-3-1">教师使用次数</el-menu-item>
          <el-menu-item index="1-3-2">学生使用次数</el-menu-item>
          <el-menu-item index="1-3-3">教学效率指数</el-menu-item>
          <el-menu-item index="1-3-4">学生学习效果</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>


      <el-sub-menu index="2">
        <template #title>教师管理</template>

        <el-menu-item index="2-1">备课设计</el-menu-item>
        <el-menu-item index="2-2">题目生成</el-menu-item>
        <el-menu-item index="2-3">学情分析</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="3">
        <template #title>学生管理</template>

        <el-menu-item index="3-1">学习助手</el-menu-item>
        <el-menu-item index="3-2">评测助手</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="4">
        <template #title>资源管理</template>

        <el-menu-item index="4-1">知识导入</el-menu-item>

      </el-sub-menu>

    </el-menu>
  </div>
</template>

<style scoped>
.el-menu-demo{
  padding: 0 40px;
  background-color: rgba(255, 255, 255, 0);
  border: 0 solid rgba(255, 255, 255, 0);
}
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  /*会使元素右侧的可用空间被完全占据*/
  margin-right: auto;
}
.el-menu--horizontal > .el-menu-item:not(:first-child),
.el-menu--horizontal > .el-sub-menu {
  /* 应用于除第一个菜单项之外的样式 */
  width: 150px;
}
</style>